<!DOCTYPE HTML>
<html>
 <head>
  <title>首页</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="../assets/css/my-code.css">
     <link href="../assets/css/common-style.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
     <script type="text/javascript" src="../assets/js/bui-min.js"></script>
     <script type="text/javascript" src="../assets/js/config-min.js"></script>
     <script src="../assets/js/my.js"></script>
</head>
<body>
<div class="container">
     <ul class="head-nav">
         <li class="active"><span>待检料</span><span class="number">6</span></li>
         <li><span>待包装</span><span class="number">3</span></li>
         <li><span>待确认发送</span><span class="number">3</span></li>
         <li><span>签收</span><span class="number">5</span></li>
         <li><span>取消出库</span></li>
         <li><span>取消指令</span></li>
         <li><span>报废</span></li>
     </ul>
    <div class="search-mes">
        <form action="" id="my-form">
            <lable>
                单号
                <input type="text">
            </lable>
            <lable style="margin-left: 25px">
                单号
                <input type="text">
            </lable>
            <button class="button-search">搜索</button>
            <button class="button-export">导出</button>
        </form>
        <div class="search-result">
            <div>共<span>15</span>个搜索结果</div>
            <div class="row">
                <div class="" style="width:100%">
                    <div id="grid">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="" style="width:100%">
                    <div id="bar">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
 <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
 <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>

 <script type="text/javascript">
    BUI.use('common/page');
    BUI.use(['bui/grid','bui/toolbar','bui/data'],function(Grid,Toolbar,Data){
        var NumerPBar = Toolbar.NumberPagingBar;
        var Store = Data.Store,
            columns = [{
                title : '序号',
                dataIndex :'a',
                width:100
            },{
                title : '单号',
                dataIndex :'b',
                width:100
            },{
                title : '设备编码',
                dataIndex : 'c',
                width:150
            },{
                title : '设备名称',
                dataIndex : 'd',
                width:100
            },{
                title : '入库时间',
                dataIndex : 'e',
                width:150
            }];
            store = new Store({
                url : '../data/code-search.json',
                autoLoad:true, //自动加载数据
                params : { //配置初始请求的参数
                    a : 'a',
                    b : 'b',
                    c : 'c',
                    d : 'd',
                    e : 'e'
                },
                pageSize:3	// 配置分页数目
            });
        bar = new NumerPBar({
            render : '#bar',
            autoRender: true,
            elCls : 'pagination',
            store : store,
            prevText:'上一页',
            nextText:'上一页'
        });
        grid = new Grid.Grid({
            render:'#grid',
            columns : columns,
            forceFit : true,
            plugins: [BUI.Grid.Plugins.CheckSelection, BUI.Grid.Plugins.ColumnChecked, BUI.Grid.Plugins.AutoFit, BUI.Grid.Plugins.ColumnResize], // 插件形式引入多选表格
            store : store
        });
        grid.render();
    });
</script>
</html>  